<template>
  <!-- <div style="margin-left: 300px; width: 1200px"> -->
  <div style="margin: auto;margin-left: 200px; margin-right: 200px;">
    <h1 style="text-align: center;">人气精选</h1>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="filterText" class="input-with-select" @change="getNovelByStatea()">
        <el-select v-model="novelHouse" slot="prepend" placeholder="请选择" @change="getPopularityNovelByStatea()">
          <el-option v-for="item in house" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getPopularityNovelByStatea()"></el-button>
      </el-input>
    </div>

    <el-table ref="multipleTable" :row-key="getRowKey" :data="novels" @selection-change="handleSelectionChange"
      tooltip-effect="dark" style="width: 100%" :border="true">
      <el-table-column type="selection" :reserve-selection="true" width="55">
      </el-table-column>
      <el-table-column label="书号" width="120">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column prop="novelName" label="书名" width="120">
      </el-table-column>
      <el-table-column prop="novelAuthor" label="作者" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="novelHouseName" label="书库" show-overflow-tooltip>
      </el-table-column>
    </el-table>


    <div style="margin-top: 20px">
      <el-button @click="setPopularitySelecteda()">提交选择</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>



    <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper" @current-change="getPopularityNovelByStatea" />
  </div>
</template>
<script>
  import moment from "moment"
  import novel from '@/api/novel'
  import {
    MessageBox,
    Message
  } from 'element-ui'
  export default {
    data() {
      return {
        filterText: '',
        novelHouse: '',
        page: 1, //当前页
        limit: 4, //每页记录数
        total: 0, //总记录数
        novels: [{
          id: '',
          novelName: "",
          novelAuthor: "",
          novelBrief: "",
          novelCover: "",
          novelState: 0,
          novelHouse: 0,
          novelHouseName: "",
          gmtCreate: ""
        }],
        house: [{
            value: '0',
            label: '全部文库'
          },
          {
            value: '1',
            label: '电击文库'
          },
          {
            value: '2',
            label: '富士见文库'
          },
          {
            value: '3',
            label: '角川文库'
          },
          {
            value: '4',
            label: 'MF文库J'
          },
          {
            value: '5',
            label: 'Fami通文库'
          },
          {
            value: '6',
            label: 'GA文库'
          },
          {
            value: '7',
            label: 'HJ文库'
          },
          {
            value: '8',
            label: '一迅社'
          },
          {
            value: '9',
            label: '集英社'
          },
          {
            value: '10',
            label: '小学馆'
          },
          {
            value: '11',
            label: '讲谈社'
          },
          {
            value: '12',
            label: '少女文库'
          },
          {
            value: '13',
            label: '其他文库'
          }
        ],
        multipleSelection: []
      }
    },
    created() {

    },
    methods: {
      //添加人气精选
      setPopularitySelecteda() {
        console.log(this.multipleSelection.length)
        if ((this.multipleSelection.length % 4) != 0) {
          this.$message.error('所选数量错误');
        } else {
          novel.setPopularitySelected(this.multipleSelection)
            .then(response => {
              Message({
                message: response.data.message || 'success',
                type: 'success',
                duration: 5 * 1000
              })
            })
        }

      },
      //实现翻页记录之前的数据
      getRowKey(row) {
        return row.id;
      },
      //清空所选项
      toggleSelection() {
        this.$refs.multipleTable.clearSelection();
      },
      test() {

      },
      //添加所选项
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // getPopularityNovelByStateLike(){
      //   if(this.novelHouse != null || !this.novelHouse.equals("")){
      //     this.novelHouse = 0
      //   }
      //   this.getPopularityNovelByStatea()
      // },
      //根据书库与页数添加数据
      getPopularityNovelByStatea(page = 1) {
        this.page = page;
        if (this.filterText == "" || this.filterText == null) {
          novel.getPopularityNovelByState(this.novelHouse, this.page, this.limit)
            .then(response => {
              this.novels = response.data.siriusNovel.records
              this.page = response.data.siriusNovel.current
              this.total = response.data.siriusNovel.total
              for (var i = 0; i < this.novels.length; i++) {
                this.novels[i].novelHouseName = this.getHouseWord(this.novels[i].novelHouse)
                this.novels[i].gmtCreate = moment(this.novels[i].gmtCreate).format("YYYY-MM-DD")
              }

            })
        } else {
          novel.getPopularityNovelByState(this.novelHouse, this.page, this.limit, this.filterText)
            .then(response => {
              this.novels = response.data.siriusNovel.records
              this.page = response.data.siriusNovel.current
              this.total = response.data.siriusNovel.total
              for (var i = 0; i < this.novels.length; i++) {
                this.novels[i].novelHouseName = this.getHouseWord(this.novels[i].novelHouse)
                this.novels[i].gmtCreate = moment(this.novels[i].gmtCreate).format("YYYY-MM-DD")
              }

            })
        }
      },
      //添加书库真实名字
      getHouseWord(num) {
        switch (num) {
          case 1:
            return "电击文库";
            break;
          case 2:
            return "富士见文库";
            break;
          case 3:
            return "角川文库";
            break;
          case 4:
            return "MF文库J";
            break;
          case 5:
            return "Fami通文库";
            break;
          case 6:
            return "GA文库";
            break;
          case 7:
            return "HJ文库";
            break;
          case 8:
            return "一迅社";
            break;
          case 9:
            return "集英社";
            break;
          case 10:
            return "小学馆";
            break;
          case 11:
            return "讲谈社";
            break;
          case 12:
            return "少女文库";
            break;
          case 13:
            return "其他文库";
            break;
          default:
            return "其他文库";
            break;
        }
      }
    }
  }
</script>
<style>
  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
